<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        用户名：<input type="text" v-model="name"><br>
        密   码:<input type="password" v-model="password"><br>
        确认密码:<input type="password" v-model="confirmPassword" @blur="checkPassword"><br>
        
        <span></span>
        性别：<input type="radio" value="男" v-model="radioValue">男
              <input type="radio" value="女" v-model="radioValue">女
            <br>
        籍贯：<select v-model="singleSelect">
            <option value="杭州">杭州</option>
            <option value="宁波">宁波</option>
            <option value="嘉兴">嘉兴</option>
        </select>
        选择的课程是：<input type="checkbox" value="街舞" v-model="checkedValues">街舞
        <input type="checkbox" value="书法" v-model="checkedValues">书法
        <input type="checkbox" value="篮球" v-model="checkedValues">篮球<br>
        <button type="submit" value="提交" @click="say">提交</button>
    </div>
</body>
</html>
<script>
    const connApp = Vue.createApp({
        data() {
            return {
                name:'',
                password:'',
                confirmPassword:'',
                radioValue:'',
                singleSelect:'',
                checkedValues:[],
            }
        },
        methods: {
            checkPassword(){
                if(this.password != this.confirmPassword){
                    alert("密码不一致");
                }
            },
            say(){
                alert("尊敬的"+this.singleSelect+this.name+"用户,"+"你是一位"+this.radioValue+"神,"+"你选择的课程是"+this.checkedValues.join('、'))
            }
        },
    }).mount("#app")
</script>